<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="box">我是div</div>

    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>

    <input type="text" name="hobby" value="你好">
    <input type="text" name="hobby">
    <input type="text" name="hobby">

    <ul>
        <li class="item">苹果</li>
        <li class="item">香蕉</li>
        <li class="item">猕猴桃</li>
    </ul>


</body>

</html>
<script>
    //演示document对象需要放在body下让元素加载渲染出来
    //获取document文档对象
    //window.document

    //document获取元素对象的方法
    //1.根据id获取元素对象
    var box = document.getElementById("box");
    //alert(box.innerHTML);

    //2.根据标签名获得元素对象的方法
    var ps = document.getElementsByTagName("p");
    //alert(ps[0].innerHTML);

    //3.根据标签的name属性来获取元素对象
    var hobbys = document.getElementsByName("hobby");
    alert(hobbys[0].value);

    //4.根据标签的class属性获取元素对象
    var fs = document.getElementsByClassName("item");


    //补充HTML5获取元素的方法
    //根据选择器获取单个元素对象 如果选择器存在多个对象获取第一个
    document.querySelector("#box");
    //根据选择器获取元素对象数组 
    document.querySelectorAll(".item")









</script>